<template>
  <common-select :disabled="disabled" :multiple="multiple" :data="data" @change="handleChange">
    <template v-slot:default="props">
      <CustomerChooseButton :max-number="maxNumber" :plan-id="planId" :disabled="props.disabled" :multiple="props.multiple" @confirm="props.confirm" />
    </template>
  </common-select>
</template>

<script>
import CommonSelect from "@/components/CommonSelect/index";
import CustomerChooseButton from "./choose";

export default {
  name: "CustomerChoose",

  components: {
    CustomerChooseButton,
    CommonSelect,
  },

  props: {
    data: {
      type: null,
      default: () => ({}),
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    planId: {
      type: String,
      default: '',
    },
    maxNumber: {
      type: [Number, String],
      default: 100,
    },
  },

  methods: {
    handleChange(value) {
      if (this.multiple) {
        this.$emit("change", value);
        this.$emit("update:value", value);
      } else {
        this.$emit("change", value || {});
        this.$emit("update:value", value || {});
      }
    },
  },

};
</script>

